<template>
  <div class="page">
    <!--第一行-->
    <div class="content1">
      <div class="content_li">
        <div class="bgs">
          <Echart :options="options1" height="120%" width="100%"></Echart>
        </div>
      </div>
      <div class="content_li">
        <div class="bgs">
          <Echart :options="options2" height="120%" width="100%"></Echart>
        </div>
      </div>
      <div class="content_li">
        <div class="bgs">
          <Echart :options="options3" height="120%" width="100%"></Echart>
        </div>
      </div>
    </div>
    <!--第二行-->
    <div class="content1">
      <div class="content_li">
        <div class="bgs">
          <div class="content_li_el">
            <div class="content_li_el_li">
              <span>危急值</span>
            </div>
            <div class="content_li_el_li">
              <span>{{ criticalValue }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="content_li">
        <div class="bgs">
          <div class="content_li_el">
            <div class="content_li_el_li">
              <span style="color: #b512ff">QC</span>
            </div>
            <div class="content_li_el_li">
              <span>999</span>
            </div>
          </div>
        </div>
      </div>
      <div class="content_li">
        <div class="bgs">
          <div class="content_li_el">
            <div class="content_li_el_li">
              <span>仪器故障</span>
            </div>
            <div class="content_li_el_li">
              <span>{{ countStopPipeline }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--第三行-->
    <div class="content2">
      <div class="bgs">
        <div style="height: 100%; display: flex; justify-content: space-between">
          <div style="width: 20%; height: 100%; display: flex; justify-content: center; align-items: center;">
            <div class="circle">
              <div class="circle1">
                <div class="circle2">
                  <div class="circle3">
                    <span>TAT</span>
                    <span>报警</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bottom">
            <div class="bottom_1">
              <div class="bgs">
                即将超时样本: {{ sampleShallTimeOut }}
              </div>
            </div>
          </div>
          <div class="bottom">
            <div class="bottom_2">
              <div class="bgs">
                超时样本: {{ sampleTimeOut }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Echart from '@/common/echart'

export default {
  name: "index",
  components: {
    Echart
  },
  data() {
    return {
      options1:   {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [{
          axisLabel: {
            color: '#fff'
          },
          axisTick: {
            show: false//小刻度不显示
          },
          axisLine: {
            roundCap: true,//轴线圆角
          },
          name: 'Pressure',
          type: 'gauge',
          detail: {
            formatter: '{value}',
          },
          data: [{
            value: 50,
            name: '已完成样本数量',
            title: {
              show: true,//是否显示标题
              color: '#fff',//标题颜色
              offsetCenter: [0, '70%'],//标题偏移位置x,y
            },
            detail: 999
          }],
          min: 0,
          max: 500,
          splitLine: {
            lineStyle: {
              cap: 'round'
            }
          }
        }]
      },
      options2: {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [{
          axisLabel: {
            color: '#fff'
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            roundCap: true,
          },
          name: 'Pressure',
          type: 'gauge',
          detail: {
            formatter: '{value}'
          },
          data: [{
            value: 50,
            name: '已加样样本数量',
            title: {
              show: true,
              color: '#fff',
              offsetCenter: [0, '70%'],
            },
            detail: 999
          }],
          min: 0,
          max: 500,
          splitLine: {
            lineStyle: {
              cap: 'round'
            }
          }
        }]
      },
      options3: {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [{
          axisLabel: {
            color: '#fff'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            roundCap: true,
          },
          name: 'Pressure',
          type: 'gauge',
          detail: {
            formatter: '{value}'
          },
          data: [{
            value: 50,
            name: '未完成样本数量',
            title: {
              show: true,
              color: '#fff',
              offsetCenter: [0, '70%'],
            },
            detail: 999
          }],
          min: 0,
          max: 500,
          splitLine: {
            lineStyle: {
              cap: 'round'
            }
          }
        }]
      },
      config11: {
        content: '危急值'
      },
      config12: {
        content: ""
      },
      config21: {
        content: 'QC'
      },
      config22: {
        number: [10],
      },
      config31: {
        content: '仪器故障'
      },
      config32: {
        number: [2]
      },
      settings: [],
      sampleShallTimeOut: 0,
      sampleTimeOut: 0,
      criticalValue: 0,
      countStopPipeline: 0
    }
  },
  mounted() {
    console.log(localStorage.getItem("dict"), 'localStorage.getItem("dict")')
    this.settings = JSON.parse(localStorage.getItem("dict"))
    console.log(this.settings, 'this.settings')
    this.options1.series[0].max = this.settings.img_one_finsh
    this.options2.series[0].max = this.settings.img_one_join
    this.options3.series[0].max = this.settings.img_one_unfinsh
    this.getOption1AndOption2AndOption3Data()
  },
  methods: {
    getOption1AndOption2AndOption3Data() {
      this.$http.post(this.urlInterface.sampleStatistics).then(res => {
        console.log(333, res)
        console.log(res.data.code == 1)
        if (res.data.code == 1) {
          console.log(this.options1.series[0].data[0].value, 'this.options1.series[0].data[0].value')
          console.log(res.data.data, 'res.data.data')
          this.options1.series[0].data[0].value = parseInt(res.data.data.finished)
          this.options2.series[0].data[0].value = parseInt(res.data.data.join)
          this.options3.series[0].data[0].value = parseInt(res.data.data.unfinished)
          this.criticalValue = res.data.data.criticalValue
          this.sampleShallTimeOut = res.data.data.sampleShallTimeOut
          this.sampleTimeOut = res.data.data.sampleTimeOut
          this.countStopPipeline = res.data.data.countStopPipeline
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/assets/scss/public.scss";

.bottom {
  height: 100%;
  width: 39%;
  display: flex;
  align-items: center;
  justify-content: center;

  .bottom_1 {
    height: 1.6rem;
    width: 90%;
    text-align: center;
    //background-color: #ffff00;
    font-size: 1rem;
    line-height: 1.6rem;
    color: #ffff00
  }

  .bottom_2 {
    height: 1.6rem;
    width: 90%;
    text-align: center;
    //background-color: red;
    font-size: 1rem;
    line-height: 1.6rem;
    color: #ff0000
  }

}

.page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .content1 {
    height: 32%;
    display: flex;
    justify-content: space-between;

    .content_li {
      width: 32%;
      height: 100%;

      .content_li_el {
        display: flex;
        justify-content: center;
        height: 100%;

        .content_li_el_li {
          width: 100%;
          display: flex;
          height: 100%;
          justify-content: center;
          align-items: center;
          font-size: .5rem;
          color: #00fcd6;

          .content_li_el_li_el {
            height: 100%;
          }
        }
      }
    }
  }

  .content2 {
    height: 32%;
    width: 100%;
  }
}

.circle {
  $height: 60%;
  height: $height;
  width: $height / 1.3;
  border-radius: 50%;
  background-color: forestgreen;
  display: flex;
  justify-content: center;
  align-items: center;
  border: black solid 1px;

  .circle1 {
    height: 90%;
    width: 90%;
    background-color: red;
    border-radius: 50%;
    border: black solid 1px;
    display: flex;
    justify-content: center;
    align-items: center;

    .circle2 {
      height: 90%;
      width: 90%;
      background-color: #c200ff;
      border-radius: 50%;
      border: black solid 1px;
      display: flex;
      justify-content: center;
      align-items: center;

      .circle3 {
        height: 90%;
        width: 90%;
        background-color: #ff8600;
        border-radius: 50%;
        border: black solid 1px;
        font-size: 30px;
        display: flex;
        flex-wrap: wrap;
        text-align: center;

        span {
          $height: 50%;
          display: block;
          height: $height;
          width: $height * 2;
          line-height: $height * 2;
          padding-top: .16rem
        }
      }
    }
  }
}
.bgs{
  background: url("../../assets/bg2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>
